<template>
  <div class="event-info">
    <el-form :model="ruleForm" :rules="rules" ref="SortForm" label-width="135px" label-suffix="：">
      <div class="event-content">
        <el-form-item label="上级分类" prop="parentId">
          <div class="cont-input">
            <el-cascader
              v-model="ruleForm.parentId"
              :change-on-select="true"
              :options="sortData"
              :props="propData"
              :disabled="commonTabInfo.text === '编辑' ? true : false"
              clearable>
            </el-cascader>
          </div>
        </el-form-item>
        <el-form-item label="分类名称" prop="sortName">
          <div class="cont-input">
            <el-input v-model="ruleForm.sortName" placeholder="请输入分类名称"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="分类编码" prop="sortCode">
          <div class="cont-input">
            <el-input v-model="ruleForm.sortCode" :disabled="commonTabInfo.text === '编辑' ? true : false" placeholder="请输入分类编码"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="状态" prop="isActivity">
          <div class="cont-input">
            <el-switch
              v-model="ruleForm.isActivity"
              active-value="1"
              inactive-value="0"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </div>
        </el-form-item>
        <el-form-item label="网页META关键词" prop="metaKeywords">
          <div class="cont-input">
            <el-input v-model="ruleForm.metaKeywords" placeholder="请输入网页META关键词"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="网页META描述" prop="metaDescription">
          <div class="cont-input">
            <el-input v-model="ruleForm.metaDescription" type="textarea" placeholder="请输入网页META描述"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <div class="cont-input">
            <el-input v-model="ruleForm.remark" type="textarea" placeholder="请输入备注"></el-input>
          </div>
        </el-form-item>
      </div>
      <div class="cont-footer">
        <el-button @click.native="eventTab('', 'first' )">取消</el-button>
        <template v-if="commonTabInfo.text === '新增'">
          <el-button type="primary" @click.native="addSortEvent">保存</el-button>
        </template>
        <template v-else-if="commonTabInfo.text === '编辑'">
          <el-button type="primary" @click.native="editSortEvent">保存编辑</el-button>
        </template>
      </div>
    </el-form>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { GetPublishSortTable, AddOrUpdatePublishSort, GetPublishSortSingle } from '@/api/requestConfig'
  import { getTreeDeepArr } from '@/utils/index' // 递归获取数组
  export default {
    name: 'SortInfo',
    data() {
      return {
        propData: {
          value: 'id',
          label: 'sortName',
          children: 'data'
        }, // 上级菜单配置
        ruleForm: {
          parentId: [],
          sortName: '',
          sortCode: '',
          isActivity: '1',
          metaKeywords: '',
          metaDescription: '',
          remark: ''
        },
        rules: {
          sortName: [
            { required: true, message: '请输入分类名称', trigger: 'blur' }
          ],
          sortCode: [
            { required: true, message: '请输入分类编码', trigger: 'blur' }
          ]
        },
        sortData: [], // 树形数据
        editData: {},
        addFlag: true
      }
    },
    computed: {
      ...mapGetters([
        'commonTabInfo'
      ])
    },
    created() {
      // 获取菜单数据
      GetPublishSortTable().then(res => {
        if (res.data) {
          this.sortData = res.data
        }
      }).then(() => {
        // 编辑时获取数据
        if (this.commonTabInfo.text === '编辑') {
          GetPublishSortSingle(this.commonTabInfo.custom.id).then(res => {
            if (res.data) {
              const resData = res.data
              this.editData = resData
              console.log(this.editData)
              if (this.editData) {
                for (var key in this.editData) {
                  if (key === 'parentId') {
                    if (resData.parentId === 0) {
                      this.ruleForm.parentId = []
                    } else {
                      this.ruleForm.parentId = getTreeDeepArr(resData.parentId, 'id', this.sortData, 'data') // 渲染上级选择的菜单
                    }
                  } else if (key === 'isActivity') {
                    this.ruleForm[key] = String(this.editData[key])
                  } else {
                    this.ruleForm[key] = this.editData[key]
                  }
                }
                console.log(this.ruleForm)
              }
            }
          })
        }
      })
    },
    methods: {
      // tabs操作
      eventTab(text, tabsName, custom) {
        this.$store.dispatch('handleTabInfo', {
          text: text,
          tabsName: tabsName,
          custom: custom
        })
      },
      // 新增菜单
      addSortEvent() {
        var self = this
        if (!this.addFlag) {
          return
        }
        this.$refs.SortForm.validate(function(valid) {
          if (valid) {
            var needData = {}
            console.log(self.ruleForm.parentId)
            if (self.ruleForm.parentId.length > 0) {
              needData.parentId = self.ruleForm.parentId[self.ruleForm.parentId.length - 1]
            }
            needData.sortName = self.ruleForm.sortName
            needData.sortCode = self.ruleForm.sortCode
            needData.metaKeywords = self.ruleForm.metaKeywords
            needData.metaDescription = self.ruleForm.metaDescription
            needData.remark = self.ruleForm.remark
            needData.isActivity = self.ruleForm.isActivity
            self.addFlag = false
            AddOrUpdatePublishSort(needData).then(res => {
              if (res.code === 200) {
                self.$message.success(res.message)
                setTimeout(function() {
                  self.eventTab('refresh', 'first', 'informationSort')
                }, 500)
              } else {
                self.$message.error(res.message)
              }
            }).catch(error => {
              console.log(error)
            })
          } else {
            return
          }
        })
        setTimeout(function() {
          self.addFlag = true
        }, 3000)
      },
      // 编辑
      editSortEvent() {
        var self = this
        if (!this.addFlag) {
          return
        }
        this.$refs.SortForm.validate(function(valid) {
          if (valid) {
            var needData = {}
            needData.sortName = self.ruleForm.sortName
            needData.sortCode = self.ruleForm.sortCode
            needData.metaKeywords = self.ruleForm.metaKeywords
            needData.metaDescription = self.ruleForm.metaDescription
            needData.isActivity = self.ruleForm.isActivity
            needData.remark = self.ruleForm.remark
            needData.id = self.editData.id
            if (self.ruleForm.parentId.length > 0) {
              needData.parentId = self.ruleForm.parentId[self.ruleForm.parentId.length - 1]
            }
            self.addFlag = false
            AddOrUpdatePublishSort(needData).then(res => {
              if (res.code === 200) {
                self.$message.success(res.message)
                setTimeout(function() {
                  self.eventTab('update', 'first', 'informationSort')
                }, 500)
              } else {
                self.$message.error(res.message)
              }
            }).catch(error => {
              console.log(error)
            })
          } else {
            return
          }
        })
        setTimeout(function() {
          self.addFlag = true
        }, 3000)
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/info.scss";
</style>
